iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0

昨天我們成功建立並啟動了 React Native 專案,今天不免俗氣的來一下寫程式的課程最一開始的萬年範例 「Hello World」

開始之前

對於沒寫過也沒經驗的人,我覺得最好的學習就是抄答案。先找到你想要的答案去試試看,可以動了在研究他是做了什麼,用了哪些東西讓他可以動。

在打開 APP的畫面中其實就是一個 RN的介紹教學。我們可以看到其實裡面有個Hello World 範例。

點進去看看,可以看到範例程式碼。

import React from 'react';
import {Text, View} from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};
export default HelloWorldApp;

果然是萬年起始範例。那這個要放在哪裡呢?

Hello World

實作

  1. 打開項目: 用 VS Code ,打開昨天建立的 React Native 專案。
    資料夾結構如下:
MyNewProject/
├── android/
├── ios/
├── node_modules/
├── App.tsx  <-- 這是我們要修改的地方
└── package.json
  1. 修改 App.tsx

    打開 App.txs,會看到一排程式碼。不用太緊張,那就是一啓動的那個畫面的程式碼,我們可以大膽把 Hello Word 範例直接複製貼上上去。

就可以在模擬器的畫面看到 Hello World了,第一次修改程式成功了。

元件( Component)

在 React 和 React Native 開發中,元件(Component) 是最核心的概念之一。簡單來說,元件就像是應用程式中的「積木」,可以將應用的不同部分模組化,這樣每個部分都可以獨立開發、重複使用。

元件基本概念

  1. 元件是一個函數或Class:在 React 和 React Native 中,元件本質上是一個 JavaScript 函數或類。它們接收輸入(通常稱為 props)並返回要顯示的 UI 元素(通常是 JSX 語法)。

  2. UI 的可重用部分:元件是一段可重用的 UI 代碼,它可以是頁面中的任何部分——按鈕、標題、表單甚至是整個頁面。每個元件可以單獨開發,並且可以在不同的地方重複使用,這使應用更具結構化且更容易維護。

  3. 將 UI 和邏輯封裝在一起:元件不僅負責顯示 UI,它還可以包含處理用戶交互的邏輯(如按鈕點擊、表單驗證等)。這樣可以讓代碼更具模組化,也能提升開發效率。

函數式元件:現代開發中更多使用的是函數式元件,這些元件是一個簡單的函數,接收 props 並返回 UI。

const HelloWorld = (props) => {
  return <Text>Hello, {props.name}!</Text>;
};

元件的組合

一個應用程式通常由很多元件組合而成,主元件可以引入其他元件,從而組成一個完整的 UI。

const App = () => {
  return (
    <View>
      <Header />
      <Content />
      <Footer />
    </View>
  );
};

在這裡,HeaderContentFooter 都是子元件,組合成一個完整的頁面。

修改 Hello World

我們把寫在 APP.tsx裡面的程式碼提出來並新增一個檔案 HelloWorld.tsx 於 components資料夾之下。

MyNewProject/
├── src/
│   ├── components/
│   │   └── HelloWorld.tsx  >>>> 新增的檔案
│   └── App.tsx
├── android/
├── ios/
└── package.json

HelloWorld.tsx

import React from 'react';
import {View, Text} from 'react-native';

const HelloWorld = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default HelloWorld;

APP.tsx

import React from 'react';
import HelloWorld from './src/components/HelloWorld';

const App = () => {
  return (
      <HelloWorld />
  );
};

export default App;

一樣可以在模擬器看到 Hello world。

樣式(style)

style 是用來設定元件的樣式,控制 UI 的外觀和排版。在 React Native 中,style 是以 JavaScript 對象的形式來處理的。網頁也可以使用 JavaScript,或是CSS。

在 React Native 中,會有兩個方式可以來寫 Style:Inline StyleStyleSheet.create()

1. Inline Style(行內樣式)

寫法: 行內樣式是直接在元件上使用 style 屬性,並以 JavaScript 物件的方式定義樣式。

範例:

import React from 'react';
import { View, Text } from 'react-native';

const HelloWorldApp = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 24 }}>Hello, world!</Text>
      </View>
    );
};

export default HelloWorldApp;

優點:

  • 簡單直接:不需要額外的樣式表,直接在元件上設置,適合臨時修改或簡單樣式。

缺點:

  • 難以維護:當元件樣式變得複雜時,行內樣式會讓程式碼變得難以維護,特別是在多個元件中重複使用相同的樣式。
  • 效能較低:每次渲染元件時,行內樣式會被重新創建,這可能導致效能問題,特別是在大型應用中。

2. StyleSheet.create()

寫法: StyleSheet.create() 是 React Native 提供的專門處理樣式的 API,它會將樣式定義在一個集中化的樣式表中,並且只在元件中引用。

範例:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const HelloWorldApp = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello, world!</Text>
      </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 24,
    },
});

export default HelloWorldApp;

優點:

  • 可重用性:定義一次樣式,可以在多個元件中使用,減少重複代碼。
  • 效能優化StyleSheet.create() 會將樣式轉換為底層的原生代碼,這對於效能更有幫助,尤其是當應用變得複雜時。
  • 清晰的結構:將樣式與元件邏輯分開,程式碼更具結構性,也更容易維護。

缺點:

  • 稍微複雜:對於簡單的樣式設置來說,這種方式可能看起來有些過度設計。
  • 需要更多代碼:與行內樣式相比,這種方法需要多寫幾行代碼,特別是對於簡單的應用場景。

結語

今天,使用 Hello world 這個範例和大家說了一下 React的基本精神,元件(Component) 的概念還有 樣式(Style) 的兩種編寫方式行內樣式(Inline Style)StyleSheet.create()

明天會開始製作登入頁面UI,和介紹可以使用的UI套件。

工商時間

又到了我們最後的工商時間啦~~~。Tom有在經營 Pocast,目前比較偏向職場類的閒聊,未來Podcast預計更新與程式軟體開發相關的主題。有興趣的朋友follow一下。

可以透過以下平台收聽: Apple podcast Spotify KKBOX
Linking Tree


上一篇
[Day07] React Native 開發入門:從 Setup 到啟動專案
下一篇
[Day09] 魔法的本質:使用GPT幫你變出註冊頁面
系列文
30天 使用chatGPT輔助學習APP完成接案任務委託30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言